<template>
    <view style="display: flex; flex-direction: column; height: 100vh">
		<xmInfo
		    :projectno="itemContent.projectno"
		    :projectname="itemContent.projectname"
		  ></xmInfo>
		  <view style="flex: 1;  overflow: scroll">
		<scroll-view class="scroll-list" scroll-y="true" @scrolltolower="loadMore" :refresher-enabled="true"
			:refresher-triggered="triggered" @refresherrefresh="refresherrefresh">
        <!-- <view class="cu-card"> -->
            <view class="cu-card cu-item shadow"  v-for="(item,index) in list" :key="item.id">
				<view class="cu-form-group" style="display: flex; justify-content: space-between">
				  <view style=" display: inline-block;padding: 5px;background: #3E97B0;color: #fff;width: 40px;text-align: center;font-style: italic;font-weight: bold">
				  	{{ index + 1 }}
				  </view>
				  <view class="text-xl text-bold">{{ item.createDate }}</view>
				</view>
                <!-- <view class="cu-form-group">
                    <view class="text-xl text-bold">申请时间</view>
                    <view class="text-xl text-bold">{{ item.createDate }}</view>
                </view> -->
              
                <view class="cu-form-group">
                    <view class="title">设计变更编号</view>
                    <view>{{ item.designchangeno }}</view>
                </view>
                <view class="cu-form-group">
                    <view class="title">洽商单编码</view>
                    <view>{{ item.negotiationcode }}</view>
                </view>
                <view class="cu-form-group">
                    <view class="title">是否含水表</view>
                    <view>
						<js-select v-model="item.isinvolvewatermeter" :disabled="true" dict-type="sys_yes_no" placeholder=" "></js-select>
					</view>
					<!-- dictType: 'sys_yes_no', -->
                </view>
                <view class="cu-form-group">
                    <view class="title">变更原因类型</view>
                    <view>
						<js-select class="input-align" v-model="item.changesettingid" :disabled="true" dict-type="zf_designChg_reson_type" placeholder=" "></js-select>
					</view>
					<!-- dictType: 'zf_designChg_reson_type', -->
                </view>
                <view class="cu-form-group">
                    <view class="title">变更原因</view>
                    <view>{{ item.changeremark }}</view>
                </view>
                <view class="cu-form-group">
                    <view class="title">确认变更日期</view>
                    <view>{{ item.ddate }}</view>
                </view>
				<view class="cu-form-group">
				    <view class="title">洽商退回人</view>
				    <view>{{ item.enduser }}</view>
				</view>
				<view class="cu-form-group">
				    <view class="title">洽商退回消息</view>
				    <view>{{ item.msg }}</view>
				</view>
				<view class="cu-form-group">
				    <view class="title">变更附件</view>
				    <view @click="xiazai(item.id)" style="padding: 20px;color: #3E97B0;" v-if="flag">下载</view>
				</view>

               
            </view>
            
        <!-- </view> -->
		<view v-if="list.length" class="loadmore">
			<u-loadmore :status="loadStatus"></u-loadmore>
		</view>
		<u-empty v-if="!list.length"></u-empty>
		</scroll-view>
        
		<!-- <view style="height: 80px"></view>
		<view class="btn-group cu-bar foot" style="height: 80px">
		    <button class="cu-btn bg-green shadow-blur"@click="add('')">
		        <text class="cuIcon-add"></text> 上传
		    </button>
		</view> -->
		</view>
    </view>
</template>
<script>
import xmInfo from "@/pages/zfgs/index/componetns/xmInfo.vue";
import {hasPermission} from '@/common/fire.js'
  export default{
  components: {xmInfo },
    data(){
        return{
			triggered: false,
			loadStatus: 'loadmore',
			query: {
				pageNo: 1,
				pageSize: 20,
			},
			itemContent:{},
            imgList: ["http://192.168.1.49:8080/app/static/image/zfgs/zfgs1.jpg","http://192.168.1.49:8080/app/static/image/zfgs/zfgs2.jpg"],
            list:[],
			flag: hasPermission('app:btn:down:shejibiangeng'),
        }
    },
	onShow() {
		this.query.pageNo = 1;
		this.loadList();
	},
	onLoad(e) {
	  if (typeof e.item !== "undefined") {
	    try {
	      this.itemContent = JSON.parse(e.item);
		 this.query.projectcode = this.itemContent.projectno
	      console.log(this.itemContent);
	    } catch (error) {
	      console.error("Failed to parse item:", error);
	    }
	  } else {
	    console.warn("Item is undefined.");
	  }
	},
	
    methods:{
		extractUrl(url) {
			console.log(url)
			const regex = /^http\:\/\/[^\/]+\//;
			const match = url.match(regex);
			return match ? match[0] : null;
		},
		xiazai(id){
			this.$u.api.zfgs.pmAttachmentCheck({id,type:'2'}).then(res => {
				console.log(res);
				if(res.result == '200'){
					let url = this.vuex_config.baseUrl + '/proj/attachment/pmAttachment/download?id=' + id +'&type=2'
					this.downloadAndOpenFile(url)
				}else if(res.result == '203'){
					const hostUrl = this.extractUrl(this.vuex_config.baseUrl);
					const dataurl = hostUrl + res.data;
				   	uni.setClipboardData({
						data: dataurl,
						success: ()=> {}
					});
					uni.showModal({
						title: '提示',
						content: '(大文件)链接已复制，请前往浏览器下载',
						showCancel: false,
						success: function(res) {}
					});
					
					// window.location.href = res.data
				}else{
					uni.showModal({
						title: '提示',
						content: res.message,
						showCancel: false,
						success: function(res) {}
					});
				}
			})
		},
		// 预览图片
		doPreviewImage(url) {
		  // const images = this.lists.map((item) => item.url || item.path);
		  uni.previewImage({
		    urls: [url],
		    current: url,
		    success: () => {
		      // this.$emit("on-preview", url, this.lists, this.index);
		    },
		    fail: () => {
		      uni.showToast({
		        title: "预览图片失败",
		        icon: "none",
		      });
		    },
		  });
		},
		async downloadAndOpenFile(serverUrl) {
		  console.log(serverUrl, "serverUrl");
		  uni.downloadFile({
		    url: serverUrl,
		    success: function (res) {
		      var filePath = res.tempFilePath;
		      console.log(filePath, res);
		      uni.openDocument({
		        filePath: filePath,
		        showMenu: true,
		        success: function (res) {
		          console.log("打开文档成功");
		        },
		      });
		    },
		    fail: function (err) {
		      console.log(err);
		    },
		  });
		},
		async refresherrefresh() {
			this.triggered = true
			this.query.pageNo = 1;
			await this.loadList()
			this.triggered = false
		},
		loadList(type) {
			this.$u.api.zfgs.pmDesignchangeData(this.query).then(res => {
				if (res.list.length < 20 || res.list.length == 0) {
					this.loadStatus = "nomore";
				}
				var list = res.list;
				if (type == "add") {
					for (var i = 0; i < list.length; i++) {
						this.list.push(list[i])
					}
				} else {
					this.list = list;
				}
			})
		
		},
		loadMore() {
			this.loadStatus = "loading";
			setTimeout(() => {
				this.query.pageNo += 1;
				this.loadList("add");
			}, 100);
		},
		
        add(item){
            console.log(item,'item')
            if(item){
                uni.navigateTo({
                    url: '/pages/zfgs/proj/zg/pmRectification/form?id='+item.id
                })
            }else{
                uni.navigateTo({
                    url: '/pages/zfgs/proj/zg/pmRectification/form?projectno='+this.itemContent.projectno + '&name='+this.itemContent.projectname + "&id=''"
                })
            }
        },
        ViewImage(imageList,e) {
            // 阻止冒泡
            const url = imageList.map(item => item.url);
            e.stopPropagation();
            uni.previewImage({
                urls: url,
                current: e.currentTarget.dataset.url
            });
        },
    }
  }

</script>
<style lang="scss" scoped>
	/deep/ .u-progress.data-v-0d33af60 {
		display: none;
	}
	/deep/.u-input__input.data-v-460c1d26 {
	    text-align: right;
	}
.cu-btn {
  font-size: 16px;
  height: 40px;
}
.foot{
    background: #fff;
}
.cu-item{
  flex-wrap: wrap;
  padding: 15px !important;
}
.title{
    flex-shrink: 0;
}
.grid-square{
    margin-bottom: 0 !important;
}
::v-deep .u-input__input{
	text-align: right;
}
</style>